<template>
  <div class="main-container">
    <el-form :model="query" inline label-width="80px">
      <el-form-item>
        <el-button v-permission="'exam:save'" type="primary" @click="toExamUpdate({})">添加考试</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model="query.examName" placeholder="考试名称" prefix-icon="Search" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery()"> 查询</el-button>
        <el-button @click="resetQuery()">重置</el-button>
        <common-sort @sort="handleSort" />
      </el-form-item>
    </el-form>
    <el-table v-loading="page.loading" :data="page.list" row-key="id" class="drag-table">
      <el-table-column :min-width="180" label="考试名称" prop="examName">
        <template #default="scope">
          <el-tag> <enum-view :enum-name="'ExamType'" :enum-value="scope.row.examType" /> </el-tag>&nbsp;{{ scope.row.examName }}
          <div v-if="scope.row.examType === 1">
            <div style="margin-top: 10px">
              有效期：
              <span v-if="scope.row.validityDateType === 1">长期有效</span>
              <span v-if="scope.row.validityDateType === 2">{{ scope.row.days }}天</span>
              <span v-if="scope.row.validityDateType === 3">{{ scope.row.beginTime }}~{{ scope.row.endTime }}</span>
            </div>
            <div style="margin-top: 10px">
              考试次数：
              <span v-if="scope.row.examCount > 0">{{ scope.row.examCount }}</span>
              <span v-else>不限次数</span>
            </div>
          </div>
          <div v-if="scope.row.examType === 2">
            <div style="margin-top: 10px">
              报名时间：{{ scope.row.registrationStartTime }} ~
              {{ scope.row.registrationEndTime }}
            </div>
            <div style="margin-top: 10px">
              开考时间：{{ scope.row.examStartTime }}，报名限制：
              <span v-if="scope.row.registrationUserLimitCount > 0">最多允许 {{ scope.row.registrationUserLimitCount }} 人报名</span>
              <span v-else>不限人数</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :min-width="50" label="所属分类" prop="categoryName">
        <template #default="scope">
          {{ scope.row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column :min-width="50" label="售价" prop="price">
        <template #default="scope">
          <span>￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column :min-width="120" label="关联试卷">
        <template #default="scope">
          <el-button link type="primary" @click="toPaperPreview(scope.row.paperId)">{{ scope.row.paperName }} </el-button>
          <div style="margin-top: 10px">
            <div>
              【随机组卷：
              <enum-view :custom-list="selectSwitch" :enum-value="scope.row.randomCombine" />
              】
            </div>
            <div>
              【题目乱序：
              <enum-view :custom-list="selectSwitch" :enum-value="scope.row.questionDerangement" />
              】
            </div>
            <div>
              【选项乱序：
              <enum-view :custom-list="selectSwitch" :enum-value="scope.row.optionDerangement" />
              】
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :min-width="30" label="状态">
        <template #default="scope">
          <enum-view :enum-name="'publishStatus'" :enum-value="scope.row.publishStatus" />
        </template>
      </el-table-column>
      <el-table-column :width="220" fixed="right" label="操作">
        <template #default="scope">
          <el-button v-permission="'exam:data'" link type="primary" @click="toExamRecord(scope.row)">数据</el-button>
          <el-divider v-permission="'exam:data'" direction="vertical" />
          <el-button v-permission="'exam:edit'" link type="primary" @click="toExamUpdate(scope.row)">编辑</el-button>
          <el-divider v-permission="'exam:edit'" direction="vertical" />
          <el-dropdown>
            <el-button link type="primary">
              更多操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <div v-permission="'exam:publish'" @click="handlePublish(scope.row)">
                  <el-dropdown-item v-if="scope.row.publishStatus === 0">发布</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.publishStatus === 1">取消发布</el-dropdown-item>
                </div>
                <div v-permission="'exam:edit'" @click="toExamUpdate({ id: scope.row.id, isCopy: true })">
                  <el-dropdown-item> 复制</el-dropdown-item>
                </div>
                <div v-permission="'exam:delete'" @click="handleDelete(scope.row)">
                  <el-dropdown-item>删除</el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <common-pagination v-model:page="page" @pagination="handlePage" />
  </div>
</template>

<script setup>
  import useTable from '@/utils/table'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import { examApi } from '@/api/exam'
  import { useRouter } from 'vue-router'
  import EnumView from '@/components/Enum/View/index.vue'
  import { selectSwitch } from '@/utils/constants.js'
  import CommonSort from '@/components/Common/Sort/index.vue'

  const router = useRouter()

  // 考试数据
  const toExamRecord = function (row) {
    router.push({ path: '/exam/record', query: { examId: row.id } })
  }

  // 添加和修改
  const toExamUpdate = (item) => {
    router.push({ path: '/exam/update', query: { examId: item.id, isCopy: item.isCopy } })
  }

  // 预览
  const toPaperPreview = (id) => {
    router.push({ path: '/paper/preview', query: { paperId: id } })
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery, handleDelete, handlePublish, handleSort } = useTable({
    page: examApi.examPage,
    delete: examApi.examDelete,
    publish: examApi.examPublish,
    sort: examApi.examSort
  })
</script>
